<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <template v-for="item in types">
           <div>
                <input type="radio" v-model="sel" :value="item"><label for="">{{item}}</label>
           </div>
       </template>
        <div v-if="sel==='萌宠'">
            <show :showall="series.pet"></show>
            <!-- <template>
                            <div v-for="pet in series.pet">
                                <img :src="pet" alt="">
                            </div>
                        </template> -->
        </div>
            <div v-else-if="sel==='风景'">
                <!-- <template>
                                <div v-for="scenery in series.scenery">
                                    <img :src="scenery" alt="">
                                </div>
                            </template> -->
                <show :showall="series.scenery"></show>
            </div>
            <div v-else-if="sel==='汽车'">
                <!-- <template>
                                <div v-for="car in series.car">
                                    <img :src="car" alt="">
                                </div>
                            </template> -->
                <show :showall="series.car"></show>
            </div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        Vue.component("show",{
            props:["showall"],
            template:`
            <div>
                <div v-for="showall in showall">
                    <img :src="showall" alt="">
                </div>
            </div>
            `
        }) 
        const app = new Vue({
            el:"#app",
            data:{
                sel:"宠物",
                types:["宠物","风景","汽车"],
                series:{
                    pet: ["https://img0.baidu.com/it/u=2154503972,3428051834&fm=26&fmt=auto&gp=0.jpg", "https://img2.baidu.com/it/u=3137646855,2454399309&fm=26&fmt=auto&gp=0.jpg"],
                    scenery: ["https://img1.baidu.com/it/u=1605489254,3208869051&fm=26&fmt=auto&gp=0.jpg", "https://img1.baidu.com/it/u=3593645114,3563539419&fm=26&fmt=auto&gp=0.jpg"],
                    car: ["https://img0.baidu.com/it/u=155715894,1100584632&fm=26&fmt=auto&gp=0.jpg", "https://img1.baidu.com/it/u=3161057015,1042861478&fm=26&fmt=auto&gp=0.jpg"]
                }
            }
        })
    </script>
</body>
</html>